<template>
  <view>
    <view class="transition-bg">
      <view>
        <view class="u-line-3 contract-name">
          <text class="primary-color">【{{ projectInfo.projectType }}】</text
          >{{ projectInfo.projectName }}
        </view>
        <view class="tag-box">
          <view>
            <text class="tag-item">
              {{ projectInfo.projectType
              }}{{
                projectInfo.drugRegister ? '-' + projectInfo.drugRegister : ''
              }}
            </text>
            <text class="tag-item m-x-10" v-if="projectInfo.stages">{{
              projectInfo.stages
            }}</text>
            <text class="tag-item">{{ projectInfo.projectNo }}</text>
          </view>
        </view>
        <view class="u-m-t-20">
          <describeVue
            :data="taskInfo"
            :column="headColumn"
            :empty-value="'无'"
          >
            <template #invoiceFileShow="{ prop, data }">
              <!-- 222 -->
              <updateFileVue
                v-if="data[prop] && data[prop].length > 0"
                v-model="data[prop]"
                :onlyShow="true"
              ></updateFileVue>
              <text v-else>无</text>
            </template></describeVue
          >
        </view>
        <view class="u-m-t-10 u-m-b-10">
          <u-divider
            border-color="#e8eaee"
            half-width="50%"
            :use-slot="false"
          ></u-divider>
        </view>
        <view class="u-text-right">
          <span
            class="font-bold"
            :class="PAY_STATUS_MAP[taskInfo.status]?.color"
            >{{ PAY_STATUS_MAP[taskInfo.status]?.label }}</span
          >
        </view>
      </view>
    </view>
    <view class="u-p-b-10">
      <view class="u-m-l-30 u-m-r-30 u-m-t-30" v-if="formInfoData.length > 1">
        <u-subsection
          :list="formInfoData"
          v-model="current"
          bg-color="#cccccc"
        ></u-subsection>
      </view>
      <view v-for="item in formInfoData" :key="item.formId">
        <template v-if="item.formId === formInfoData[current].formId">
          <customFormRender
            v-if="item.formId"
            :form-id="item.formId"
            :query-value-flag="1"
          />
        </template>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import updateFileVue from '@/components/updateFile.vue';
import describeVue from '@/components/describe.vue';
import { PAY_STATUS_MAP } from '@/enums/financeEnum';
import customFormRender from '@/components/customFormRender/index.vue';
const current = ref<number>(0);
const headColumn = [
  {
    label: '提交人',
    prop: 'createUserName',
    width: 200,
  },
  {
    label: '提交时间',
    prop: 'createTime',
    width: 200,
  },
  {
    label: '开票日期',
    prop: 'makeInvoiceTime',
    width: 200,
  },
  {
    label: '发票号',
    prop: 'invoiceCode',
    width: 200,
  },
  {
    label: '发票',
    prop: 'invoiceFileShow',
    width: 200,
  },
  {
    label: '领票人',
    prop: 'receiveInvoiceUserName',
    width: 200,
  },
  {
    label: '领票日期',
    prop: 'receiveInvoiceTime',
    width: 200,
  },
  {
    label: '当前经办人',
    prop: 'currentOporater',
    width: 200,
  },
];
const props = defineProps<{
  taskInfo: any;
  formInfoData: any;
  projectInfo: any;
}>();

const { taskInfo, formInfoData, projectInfo } = toRefs(props);
</script>
<style lang="scss">
.transition-bg {
  width: 90%;
  border-radius: 30rpx;
  padding: 20rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  background: linear-gradient(to top, #d6e9ff, #fff);

  .contract-name {
    font-size: 32rpx;
    height: auto;
    font-weight: bold;
  }
  .tag-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    align-items: center;

    .tag-item {
      background: rgba(255, 255, 255, 0.5);
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #0177fd;
    }
    .m-x-10 {
      margin: 0 10rpx;
    }
  }
}
</style>
